<template>
  <view class="component-products-list">
    <view v-if="!!title" class="title">{{ title }}</view>
    <view class="list-container">
      <view
        class="itemWraper"
        v-for="item in list"
        :key="item.id"
        @tap="goToDetails(item.id)"
      >
        <view class="item shadow">
          <view class="image-wraper">
            <image
              v-if="getMainImageUrl(item)"
              class="image"
              :src="getMainImageUrl(item)"
            />
            <video
              v-else-if="getVideoUrl(item)"
              class="image"
              @tap="play"
              :src="getVideoUrl(item)"
            />
          </view>
          <view class="name">{{ item.name }}</view>
          <view class="description">{{ item.description }}</view>
          <view class="price-info">
            <text class="price">{{
              getDefaultPrice(item)
                ? `￥${moneyFormat(getDefaultPrice(item))}`
                : `${getDefaultPoint(item)}积分`
            }}</text>
            <!-- <text class="strikethrough">¥123</text> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import "./index.less";
import Taro from "@tarojs/taro";
import {
  getDefaultPriceAndPoint,
  getMainImageUrl,
  getVideoUrl,
  moneyFormat,
} from "../../../../services/products-service";

export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
  },
  methods: {
    goToDetails(productId) {
      Taro.navigateTo({
        url: `/pages/sales/details/index?productId=${productId}`,
      });
    },
    play(e: Event) {
      e.stopPropagation();
    },
    getMainImageUrl,
    getVideoUrl,
    moneyFormat,
    getDefaultPrice(product) {
      return getDefaultPriceAndPoint(product).money;
    },
    getDefaultPoint(product) {
      return getDefaultPriceAndPoint(product).points;
    },
  },
};
</script>
